<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>react 练习part08</title>
		<script src="../build/react.js"></script>
		<script src="../build/react-dom.js"></script>
		<script src="../build/browser.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/babel">
			var LikeButton = React.createClass({
				//getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性获取
				getInitialState:function(){
					return {liked:false}
				},
				handleClick:function(event){
					//this.setState方法修改状态值，每次修改后，自动调用this.render方法，再次渲染组件
					this.setState({liked:!this.state.liked})
				},
				render:function(){
					var text=this.state.liked?'liked':'haven\'t liked';
					return (
						<p onClick={this.handleClick}>
							you {text} this.Click to toggle.
						</p>
					);
				}
			});
			
			ReactDOM.render(
				<LikeButton />,
				document.getElementById('app')
			)
		</script>
	</body>
</html>
